{% extends 'games/base.html' %}
{% load static %}
{% block content %}
        <h3 class="text-center mb-5">Welcome to your Inbox, {{ user.username }}!</h3>

        <div class="row">
            <div class="col-md-8">
                <div id="talkjs-container" style="width: 100%; height: 570px;"><i>Loading chat...</i></div>
            </div>
            <div class="col disabled" id="chat-additions">
                <div class="mb-3 hidden" id="chat-options">
                    <div class="mb-1">
                        <button class="form-control btn btn-danger" id="chat-leave">Leave Chat</button>
                    </div>
                     <div class="input-group hidden" id="chat-clipboard">
                        <input type="text" class="form-control" id="chat-link">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="chat-link-copy">
                                <img src="{% static 'games/copy-to-clipboard.png' %}" width="18" height="18" alt="Copy to clipboard">
                            </button>
                        </div>
                    </div>
                </div>
               
                <h6>QUICK MESSAGES:</h6> 
                <hr>
                {% for message in quick_messages %}
                    <span id="quick-message" class="shadow-lg badge badge-pill badge-primary mt-2">{{ message }}</span>                    
                {% endfor %}
            </div>
        </div>
{% endblock content %}

{% block extrajs %} 
    <script src="{% static 'games/js/inbox.js' %}"></script>
{% endblock extrajs %}